<template>
  <div class="changePassword">
    <div class="set-layer">
      <div class="per-tab">
        <span>当前位置：</span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>密码管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form
        ref="setpasswor"
        :model="setpasswor"
        class="demo-form-inline"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="原密码：" prop="oldpassone">
          <el-input
            v-model="setpasswor.oldpassone"
            placeholder="请输入原始密码"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="passone">
          <el-input
            v-model="setpasswor.passone"
            placeholder="6-16位，必须包含数字和字母"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="passtwo">
          <el-input
            v-model="setpasswor.passtwo"
            placeholder="再次填写上面的密码"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="formValidate('setpasswor', editConfirm)">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

import mixin from "@/utils/mixin.js";
export default {
  data() {
    var isequality = (rule, value, callback) => {
      if (value === this.setpasswor.passone) {
        return callback();
      }
      callback(new Error("两次密码不一致"));
    };
    return {
      setpasswor: {
        oldpassone: "",
        passone: "",
        passtwo: "",
      },
      rules: {
        oldpassone: [
          { required: true, message: "请输入原始密码", trigger: "blur" },
        ],
        passone: [
          { required: true, message: "请输入新的密码", trigger: "blur" },
        ],
        passtwo: [
          { required: true, message: "请输入确认新的密码", trigger: "blur" },
          { validator: isequality, trigger: "blur" },
        ],
      },
    };
  },
  mixins: [mixin],
  methods: {
    editConfirm() {
      this.$http
        .put("/trademark/proPublic/modify", {
          newPassword: this.setpasswor.passtwo,
          oldPassword: this.setpasswor.oldpassone,
          phoneNum: this.$store.state.phoneNumber,
        })
        .then(
          ({ data: Response }) => {
            console.log(Response);
            if(Response.code==200){
                this.open1("密码修改成功", "success")
                setTimeout(() => {
                  this.$http("/trademark/logout")
                  .then(({ data: res }) => {
                    this.$message.success("退出成功");
                  })
                  .finally(() => {
                    sessionStorage.removeItem("token");
                    sessionStorage.removeItem("store");
                    this.$router.push("/login");
                    this.$store.commit("resetState");
                  });
                }, 1000);
            }
          },
          //(err) => this.$message.error("网络错误")
        );
    },
    open1(msg, types = "success") {
      this.$message({
        message: msg,
        type: types,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.changePassword {
  height: 100%;
  background: #fff;
  .per-tab {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666666;
    padding: 28px 0 28px 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 28px;
    /deep/.el-breadcrumb__item{
      span:hover{
        color: #409EFF;
      }
    }
    /deep/.el-breadcrumb__item:last-child{
      .el-breadcrumb__inner{
        font-weight: 700;
        cursor: default;
        &:hover{
          color: #666666;
        }
      }
    }
    /deep/.el-icon-arrow-right,
    /deep/.el-breadcrumb__inner {
      font-weight: normal;
      font-size: 14px;
      line-height: normal;
      color: #666666;
    }
  }
  .set-layer {
    .demo-form-inline {
      width: 350px;
    }
  }
  .el-form {
    margin-left: 5rem;
    /deep/.el-form-item__label {
      padding-right: 0.8rem;
    }
    /deep/.el-form-item__label::before {
      color: transparent !important;
    }
    /deep/.el-input__inner {
      height: 1.6rem;
      line-height: normal;
    }
    .el-button {
      width: 4rem;
      height: 1.6rem;
      line-height: 1.6rem;
      padding: 0;
      text-align: center;
    }
  }
}
</style>
